<template>
  <div class="forum-panel" >
    <div class="forum-header">
      <h5>论坛精选</h5>
      <div class="more">
        <a href="#">前往论坛</a>
        <span>&gt</span>
      </div>
    </div>
    <div class="forum-box">
      <ul>
        <li v-for="item in imgUrls">
          <div class="content">
            <img :src="item.img" alt="">
            <div class="info">
              <h6>{{item.infoh6}}</h6>
              <p>
                <span>{{item.infop1}}</span>
                <span>{{item.infop2}}</span>
              </p>
              <a href="#">阅读全文&gt</a>
            </div>
          </div>

        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="stylus" rel="stylesheet/stylus">
  .forum-panel
    margin-top: 30px
    border: 1px solid rgba(0,0,0,.1)
    border-radius: 8px
    overflow: hidden
    background-color: white
    .forum-header
      background-color: #fafafa
      line-height 60px
      font-size: 18px
      position: relative
      padding-left: 30px
      position: relative
      .more
        position: absolute
        right: 14px
        top: 0
        font-size: 14px
    .forum-box
      ul
        li
          height: 362px
          box-sizing: border-box
          float: left
          width: 25%
          position: relative
          border-top: 1px solid rgba(0,0,0,.1)
          border-right: 1px solid rgba(0,0,0,.1)
          .content
            width: 245px
            margin-top: 28px
            img
              height: 156px
              border-radius: 4px
              position: absolute
              margin-left: 50%
              left: -122px
            .info
              top: 166px
              width: 100%
              position: absolute
              margin-left: 50%
              left: -122px
              margin-top: 28px
              padding-top: 10px
              width: 250px
              h6
                font-size: 16px
                line-height: 24px
                color: #424242
                overflow: hidden
                height: 48px
              p
                margin-top: 18px
                font-size: 12px
                line-height: 1.2
                color: #b2b2b2
                display: block
                span
                  display: block
                  margin-top: 6px
                  &:nth-of-type(2)
                    line-height: 1
                    white-space: nowrap
                    overflow: hidden
                    text-overflow: ellipsis
              a
                font-size: 12px
                position: absolute
                bottom: -30px
                font-weight: 400
                color: blue
</style>
<script>
  export default {
    data () {
      return {
        imgUrls: [
          {
            'img': 'static/imgs/forum/bbs1.jpg',
            'infoh6': '【今日话题】 来论坛和锤友一起聊聊',
            'infop1': '没事来论坛和一群臭味相投的锤友。坐下来打',
            'infop2': '开脑洞，一起天马行空地聊聊。话题每周更新2-3次。',
            'platform': ''
          }, {
            'img': 'static/imgs/forum/bbs2.jpg',
            'infoh6': 'Smartisan M1/M1L免费试用即将开始',
            'infop1': '二龙哥准备再从龙哥那“借几台新手机给大家',
            'infop2': '用”,如果试用帖认真写，还会有罗锤子的签名照哦。一切为了情怀',
            'platform': ''
          }, {
            'img': 'static/imgs/forum/bbs3.jpg',
            'infoh6': '锤子最有出息的孩子--M1评测',
            'infop1': 'M1到底好不好用？手感怎么样？续航怎么样？',
            'infop2': '这篇锤友的文章将会为你评测并解答出锤子是不是可以砸钉子',
            'platform': ''
          }, {
            'img': 'static/imgs/forum/bbs4.jpg',
            'infoh6': '细节之美Smartisan M1L咖啡金皮革版[图赏]',
            'infop1': '看着几张图，也许会不自觉的屏住呼吸。',
            'infop2': '不只是科技论坛',
            'platform': ''
          }]
      }
    },
    components: {}
  }
</script>
